<template>
  <div class="body">
    <div class="top">
      <dl>
        <img src="../../assets/img/shili.png" alt="" />
      </dl>

      <h1>
        <span>活动专享权益</span>
        <i> 限时领取</i>
      </h1>

      <h2><img src="../../assets/active/activeA_6.png" alt="" /></h2>

      <h3>
        <b>活动时间</b>
        <i>->></i>
        <span>{{ start_time }}-{{ end_time }}</span>
      </h3>

      <h4>
        <img src="../../assets/active/activeA_5.png" alt="" />
        <img src="../../assets/active/activeA_3.png" alt="" />
        <b>199元/年</b>
        <h5><span>限时赠送</span></h5>
      </h4>

      <h6 @click="getMis()" v-if="activeState == 0">
        <img src="../../assets/active/activeA_11.png" alt="" />
      </h6>
      <h6 v-if="activeState == 2">
        <img src="../../assets/active/activeA_9.png" alt="" />
      </h6>
      <h6 v-if="activeState == 1">
        <img src="../../assets/active/activeA_10.png" alt="" />
      </h6>

      <p>完成 {{ task_num }} 个符合要求的任务（已审核完成为准）</p>
    </div>

    <div class="cen">
      <h1>活动任务</h1>

      <div class="newMli" v-for="(item, index) in tasks" :key="index">
        <dl>
          <dd>
            <img :src="item.thumbnail" alt="" />
          </dd>
          <dt>
            <h3>
              <h2 class="ellipsis">{{ item.name }}</h2>
              <!--                            <h6>-->
              <!--                                <b><i>{{item.complete_remark}}</i></b>-->
              <!--                            </h6>-->
            </h3>
            <p>{{ item.intro }}</p>
            <span>￥{{ (item.price / 100) | money }}</span>
          </dt>
        </dl>
        <h4 v-if="index < 2"></h4>
      </div>

      <h5 @click="$router.push('/mission')">点击查看更多任务</h5>
    </div>

    <div class="btm">
      <h1>活动规则</h1>
      <p>
        1. 活动时间：2020年7月1日—2020年7月31日；<br />
        2. 参与方式：点击领取活动；<br />
        3. 活动规则：参与完成10个相关任务并审核通过；<br />
        4. 活动奖品：一年期会员(价值199元)；<br />
        5. 活动更多规则详询客服；<br />
        6.Copyright 2020 最终解释权归抖赚所有；
      </p>
    </div>

    <div style="height: 0.5rem;"></div>
  </div>
</template>

<script>
import { axiosPost } from '../../axios';
import { Toast } from 'mint-ui';

export default {
  name: '',
  data() {
    return {
      start_time: '',
      end_time: '',
      tasks: [],
      activeState: 0,
      task_num: 0,
    };
  },
  mounted() {
    this.getActive();
  },
  methods: {
    getMis() {
      if (!localStorage.getItem('userinfo')) {
        Toast({
          message: '请登录',
          duration: 2000,
        });
        setTimeout(() => {
          this.$router.push('/login');
        }, 1500);
        return;
      }
      if (this.activeState != 0) {
        return Toast({
          message: '当前活动不可参与或已经参与',
          duration: 2000,
        });
      }
      axiosPost(
        'users/receive_activity',
        {
          activity_id: this.getUrlKey('activity_id'),
        },
        (res) => {
          console.log(res);
          if (res.code != 1) {
            return Toast({
              message: res.msg,
              duration: 1000,
            });
          }
          Toast({
            message: '活动领取成功',
            duration: 1000,
          });
          this.activeState = 1;
        }
      );
    },
    getActive() {
      axiosPost(
        'about/is_receive',
        {
          activity_id: this.getUrlKey('activity_id'),
        },
        (res) => {
          console.log(res);
          if (res.code != 0) {
            return Toast({
              message: res.msg,
              duration: 1000,
            });
          }
          this.start_time = res.data.start_time;
          this.end_time = res.data.end_time;
          this.tasks = res.data.tasks;
          this.activeState = res.data.status;
          this.task_num = res.data.task_num;
        }
      );
    },
  },
};
</script>

<style scoped lang="less">
@import '../../style/default';

.body {
  background: #02015c;
  overflow: auto;
}

.top {
  height: 9.3rem;
  background: url('../../assets/active/activeA_1.png') top center no-repeat;
  background-size: 100% auto;
  overflow: hidden;
  position: relative;

  dl {
    position: absolute;
    left: 0.3rem;
    top: 0.4rem;
    img {
      width: 0.73rem;
    }
  }

  h1 {
    font-weight: normal;
    font-size: @font26;
    text-align: center;
    line-height: 0.34rem;
    width: 3.38rem;
    margin: 0.97rem auto 0;
    background: url('../../assets/active/activeA_7.png') left center no-repeat,
      url('../../assets/active/activeA_7.png') right center no-repeat;
    background-size: 0.29rem auto;
    img {
      width: 0.29rem;
    }
    span {
      color: #fff8f1;
    }
    i {
      color: #feca90;
    }
  }

  h2 {
    overflow: hidden;
    img {
      width: 6.67rem;
      display: block;
      margin: 0.2rem auto 0;
    }
  }

  h3 {
    width: 4.98rem;
    height: 0.4rem;
    margin: 0.24rem auto 0;
    background: url('../../assets/active/activeA_8.png') center center no-repeat;
    background-size: 100% auto;
    text-align: center;
    font-weight: normal;
    color: #fff;
    display: table;

    b {
      font-size: 0.24rem;
      vertical-align: middle;
      display: table-cell;
      padding-left: 0.2rem;
    }
    i {
      font-size: 0.22rem;
      vertical-align: middle;
      display: table-cell;
    }
    span {
      font-size: 0.26rem;
      vertical-align: middle;
      display: table-cell;
      padding-right: 0.08rem;
    }
  }

  h4 {
    width: 3.51rem;
    height: 2.18rem;
    background: url('../../assets/active/activeA_2.png') left bottom no-repeat;
    background-size: 100% auto;
    margin: 0.96rem auto;
    overflow: hidden;
    -webkit-transform: rotate(-17deg) translateX(0.32rem);
    -moz-transform: rotate(-17deg) translateX(0.32rem);
    -o-transform: rotate(-17deg) translateX(0.32rem);
    transform: rotate(-17deg) translateX(0.32rem);

    img {
      display: block;
    }
    img:nth-child(1) {
      width: 0.5rem;
      margin: 0.2rem;
    }
    img:nth-child(2) {
      width: 1.97rem;
      margin: 0 0.61rem;
    }
    b {
      display: block;
      font-size: 0.25rem;
      color: #8f3909;
      font-weight: bold;
      margin: 0.12rem 0.61rem;
    }
    h5 {
      width: 1.34rem;
      border-radius: 0.3rem;
      background: #943a09;
      display: table;
      text-align: center;
      margin: 0.06rem 0.61rem;
      font-weight: normal;
      span {
        font-size: 0.24rem;
        vertical-align: middle;
        display: table-cell;
        color: #f3ba3f;
      }
    }
  }

  h6 {
    width: 6.4rem;
    height: 1.14rem;
    margin: -0.1rem auto 0;
    img {
      width: 100%;
    }
  }

  p {
    color: #ffe5c9;
    font-size: @font24;
    text-align: center;
    margin-top: 0.2rem;
  }
}

.cen {
  width: 6.6rem;
  height: 7.4rem;
  background: #fff;
  border-radius: 0.2rem;
  margin: 0 auto;
  overflow: hidden;

  h1 {
    font-size: 0.34rem;
    color: #02015c;
    margin: 0.3rem 0.25rem 0.45rem;
    font-weight: normal;
  }

  .newMli {
    overflow: hidden;

    dl {
      margin: 0 0.25rem;
      min-height: 1.32rem;
      dd {
        width: 1.29rem;
        height: 1.29rem;
        float: left;
        overflow: hidden;
        img {
          width: 1.29rem;
        }
      }
      dt {
        position: relative;
        width: calc(100% - 1.6rem);
        float: left;
        margin-left: 0.3rem;
        position: relative;

        h3 {
          height: 0.5rem;
          overflow: hidden;
          h2 {
            font-size: 0.32rem;
            font-weight: bold;
            color: #000000;
            max-width: 4.6rem;
            float: left;
          }
          h6 {
            height: 0.5rem;
            position: absolute;
            left: 2.7rem;
            top: 0;
            width: 100%;
            b {
              min-width: 2.3rem;
              height: 0.72rem;
              border: 1px solid rgba(255, 149, 45, 1);
              border-radius: 0.34rem;
              -webkit-transform: scale(0.5) translate(-50%, -45%);
              transform: scale(0.5) translate(-50%, -45%);
              font-size: 0.44rem;
              font-weight: 400;
              color: rgba(255, 149, 45, 1);
              text-align: center;
              display: table;
              line-height: normal;
              padding: 0 0.2rem;
              i {
                vertical-align: middle;
                display: table-cell;
              }
            }
          }
        }

        p {
          width: 3.2rem;
          font-size: 0.26rem;
          color: #888888;
          margin-top: 0.05rem;
        }

        span {
          color: #2a2b3f;
          font-size: 0.4rem;
          position: absolute;
          right: 0.05rem;
          top: 0.46rem;
          letter-spacing: -1px;
        }
      }
    }

    h4 {
      border-bottom: 1px solid #e8e8e8;
      margin: 0.3rem 0.25rem;
    }
  }

  h5 {
    color: #02015c;
    font-size: 0.3rem;
    text-align: center;
    margin-top: 0.2rem;
    text-decoration: underline;
  }
}

.btm {
  padding: 0.5rem;
  h1 {
    font-weight: normal;
    color: #ffe5c9;
    font-size: 0.3rem;
    margin-bottom: 0.2rem;
  }
  p {
    font-size: 0.24rem;
    color: #feca90;
    line-height: 0.42rem;
  }
}
</style>
